<template>
  <div>
    <div class="box">
      <div v-for="(item, index) in list" :key="index">
        <input type="checkbox" v-model="hobby" :value="item" />{{ item }}
      </div>
    </div>
    <div>
      <ul>
        <li v-for="(item, index) in hobby" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: ['科幻', '喜剧', '动漫', '冒险', '科技', '军事', '娱乐', '奇闻'],
      hobby: []
    }
  }
}
</script>

<style>
.box {
  display: flex;
}
</style>
